.item {
  margin-bottom: .5rem;
  width: 100%;
  height: 4rem;
  padding: .5rem;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all .5s ease;
  cursor: pointer;
  //animation: slideDown .5s ease;
  //animation-fill-mode: forwards;
}

//@keyframes slideDown{  // TODO: fix history animation
//  0% {
//    transform: translateY(-100%);
//  }
//  100% {
//    transform: translateY(0);
//  }
//}

.item_win{
  background-color: rgba(0, 255, 0, .2);
  //box-shadow: 0 0 10px 1px rgba(0, 255, 0, .6);
  &:hover{
    background-color: rgba(0, 255, 0, .4);
  }
}
.item_lose{
  background-color: rgba(255, 0, 0, .2);
  &:hover{
    background-color: rgba(255, 0, 0, .4);
  }
}
.item_draw{
  background-color: rgba(0, 0, 255, .2);
  &:hover{
    background-color: rgba(0, 0, 255, .4);
  }
}